<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<% response.setContentType("text/html; charset=UTF-8"); 
	request.setCharacterEncoding("UTF-8");%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
.bder{
	background-color: #EEE;
}
</style>

<script type="text/javascript" src="resources/jquery.tools.min.js"></script>

</head>
<body>

<div>
	<div class="bder">
		<h1><c:out value="${ labelBean.resetPasswordLabel }" /></h1>
		<h2>
			<table>
				<tr>
					<td><c:out value="${ labelBean.passwordLabel }" /></td>
					<td><input type="password" id="currentPassword" value=""/></td>
				</tr>
				<tr>
					<td><c:out value="${ labelBean.newPasswordLabel }" /></td>
					<td><input type="password" id="newPassword" value=""/></td>
				</tr>
				<tr>
					<td><c:out value="${ labelBean.confirmPasswordLabel }" /></td>
					<td><input type="password" id="confirmPassword" value=""/></td>
				</tr>
			</table>
			<input type="button" id="changePassword" value="<c:out value="${ labelBean.resetPasswordLabel }" />" />
		</h2>
	</div>
	
	<div class="bder">
		<h1><c:out value="${ labelBean.resetWelcomePathLabel }" /></h1>
		<h2>
			<input type="text" id="welcomePath" value="<c:out value="${ welcomePath }" />" />
			<input type="button" id="resetWelcomePath" value="<c:out value="${ labelBean.submitLabel }" />" />
		</h2>
	</div>
	
	<div class="bder">
		<h1><c:out value="${ labelBean.resetRootPathLabel }" /></h1>
		<h2>
			<input type="text" id="rootPath" value="<c:out value="${ rootPath }" />" />
			<input type="button" id="resetRootPath" value="<c:out value="${ labelBean.submitLabel }" />" />
		</h2>
	</div>
	
	<div class="bder">
		<h1><c:out value="${ labelBean.resetFileUploadUrlLabel }" /></h1>
		<h2>
			<input type="text" id="fileUploadUrl" value="<c:out value="${ fileUploadUrl }" />" />
			<input type="button" id="changeFileUploadUrl" value="<c:out value="${ labelBean.submitLabel }" />" />
			<a id="uploadUrl" href="<c:out value="${ fileUploadUrl }" />">
				<c:out value="${ labelBean.uploadFileLabel }" />
			</a>
		</h2>
	</div>
	
	<div class="bder">
		<h1><c:out value="${ labelBean.cameraConfigLabel }" /></h1>
		<table>
			<thead>
				<tr>
					<th><c:out value="${ labelBean.cameraNameLabel }" /></th>
					<th><c:out value="${ labelBean.cameraIPLabel }" /></th>
					<th><c:out value="${ labelBean.cameraPortLabel }" /></th>
					<th><c:out value="${ labelBean.cameraUserNameLabel }" /></th>
					<th><c:out value="${ labelBean.cameraPasswordLabel }" /></th>
					<th><c:out value="${ labelBean.cameraChannelLabel }" /></th>
					<th></th>
				</tr>
			</thead>
			<tr>
				<td><input type="text" id="cameraName0" value='<c:out value="${ cameraName0 }" />' /></td>
				<td><input type="text" id="cameraIP0" value='<c:out value="${ cameraIP0 }" />' /></td>
				<td><input type="text" id="cameraPort0" value='<c:out value="${ cameraPort0 }" />' /></td>
				<td><input type="text" id="cameraUserName0" value='<c:out value="${ cameraUserName0 }" />' /></td>
				<td><input type="text" id="cameraPassword0" value='<c:out value="${ cameraPassword0 }" />' /></td>
				<td><input type="text" id="cameraChannel0" value='<c:out value="${ cameraChannel0 }" />' /></td>
				<td><input id="changeCamera0" type="button" value="<c:out value="${ labelBean.submitLabel }" />" /></td>
			</tr>
			<tr>
				<td><input type="text" id="cameraName1" value='<c:out value="${ cameraName1 }" />' /></td>
				<td><input type="text" id="cameraIP1" value='<c:out value="${ cameraIP1 }" />' /></td>
				<td><input type="text" id="cameraPort1" value='<c:out value="${ cameraPort1 }" />' /></td>
				<td><input type="text" id="cameraUserName1" value='<c:out value="${ cameraUserName1 }" />' /></td>
				<td><input type="text" id="cameraPassword1" value='<c:out value="${ cameraPassword1 }" />' /></td>
				<td><input type="text" id="cameraChannel1" value='<c:out value="${ cameraChannel1 }" />' /></td>
				<td><input id="changeCamera1" type="button" value="<c:out value="${ labelBean.submitLabel }" />" /></td>
			</tr>
			<tr>
				<td><input type="text" id="cameraName2" value='<c:out value="${ cameraName2 }" />' /></td>
				<td><input type="text" id="cameraIP2" value='<c:out value="${ cameraIP2 }" />' /></td>
				<td><input type="text" id="cameraPort2" value='<c:out value="${ cameraPort2 }" />' /></td>
				<td><input type="text" id="cameraUserName2" value='<c:out value="${ cameraUserName2 }" />' /></td>
				<td><input type="text" id="cameraPassword2" value='<c:out value="${ cameraPassword2 }" />' /></td>
				<td><input type="text" id="cameraChannel2" value='<c:out value="${ cameraChannel2 }" />' /></td>
				<td><input id="changeCamera2" type="button" value="<c:out value="${ labelBean.submitLabel }" />" /></td>
			</tr>
			<tr>
				<td><input type="text" id="cameraName3" value='<c:out value="${ cameraName3 }" />' /></td>
				<td><input type="text" id="cameraIP3" value='<c:out value="${ cameraIP3 }" />' /></td>
				<td><input type="text" id="cameraPort3" value='<c:out value="${ cameraPort3 }" />' /></td>
				<td><input type="text" id="cameraUserName3" value='<c:out value="${ cameraUserName3 }" />' /></td>
				<td><input type="text" id="cameraPassword3" value='<c:out value="${ cameraPassword3 }" />' /></td>
				<td><input type="text" id="cameraChannel3" value='<c:out value="${ cameraChannel3 }" />' /></td>
				<td><input id="changeCamera3" type="button" value="<c:out value="${ labelBean.submitLabel }" />" /></td>
			</tr>
			<tr>
				<td><input type="text" id="cameraName4" value='<c:out value="${ cameraName4 }" />' /></td>
				<td><input type="text" id="cameraIP4" value='<c:out value="${ cameraIP4 }" />' /></td>
				<td><input type="text" id="cameraPort4" value='<c:out value="${ cameraPort4 }" />' /></td>
				<td><input type="text" id="cameraUserName4" value='<c:out value="${ cameraUserName4 }" />' /></td>
				<td><input type="text" id="cameraPassword4" value='<c:out value="${ cameraPassword4 }" />' /></td>
				<td><input type="text" id="cameraChannel4" value='<c:out value="${ cameraChannel4 }" />' /></td>
				<td><input id="changeCamera4" type="button" value="<c:out value="${ labelBean.submitLabel }" />" /></td>
			</tr>
			<tr>
				<td><input type="text" id="cameraName5" value='<c:out value="${ cameraName5 }" />' /></td>
				<td><input type="text" id="cameraIP5" value='<c:out value="${ cameraIP5 }" />' /></td>
				<td><input type="text" id="cameraPort5" value='<c:out value="${ cameraPort5 }" />' /></td>
				<td><input type="text" id="cameraUserName5" value='<c:out value="${ cameraUserName5 }" />' /></td>
				<td><input type="text" id="cameraPassword5" value='<c:out value="${ cameraPassword5 }" />' /></td>
				<td><input type="text" id="cameraChannel5" value='<c:out value="${ cameraChannel5 }" />' /></td>
				<td><input id="changeCamera5" type="button" value="<c:out value="${ labelBean.submitLabel }" />" /></td>
			</tr>
		</table>
	</div>
	<br />
	<div class="bder">
		<form action="logoff">
			<input type="submit" value="<c:out value="${ labelBean.logoffLabel }" />" />
		</form>
	</div>
</div>

<script type="text/javascript">

$(function(){
	$("#changePassword").click(function(){
		$.post("changePassword", 
			{
				currentPassword:$("#currentPassword").attr("value"),
				newPassword:$("#newPassword").attr("value"),
				confirmPassword:$("#confirmPassword").attr("value")
			}, function(data){
				alert(data.message);
		}, "json");
	});
	
	$("#resetWelcomePath").click(function(){
		$.post("resetWelcomePath",
			{
				welcomePath:$("#welcomePath").attr("value")
			}, function(data){
				alert(data.message);
			}, "json");
	});

	$("#resetRootPath").click(function(){
		$.post("resetRootPath",
			{
				rootPath:$("#rootPath").attr("value")
			}, function(data){
				alert(data.message);
			}, "json");
	});
	
	$("#changeFileUploadUrl").click(function(){
		$.post("changeFileUploadUrl",
			{
				fileUploadUrl:$("#fileUploadUrl").attr("value")
			},
			function(data){
				if(data.succeed){
					$("#uploadUrl").attr("href", $("#fileUploadUrl").attr("value"));
				}else{
					alert(data.message);
				}
			},
			"json");
	});
	
	$("#changeCamera0").click(function(){changeCamera(0);});
	$("#changeCamera1").click(function(){changeCamera(1);});
	$("#changeCamera2").click(function(){changeCamera(2);});
	$("#changeCamera3").click(function(){changeCamera(3);});
	$("#changeCamera4").click(function(){changeCamera(4);});
	$("#changeCamera5").click(function(){changeCamera(5);});
	
	function changeCamera(id){
		$.post("changeCamera",
			{
				cameraName: $("#cameraName" + id).attr("value"),
				cameraIP: $("#cameraIP" + id).attr("value"),
				cameraPort: $("#cameraPort" + id).attr("value"),
				cameraUserName: $("#cameraUserName" + id).attr("value"),
				cameraPassword: $("#cameraPassword" + id).attr("value"),
				cameraChannel: $("#cameraChannel" + id).attr("value"),
				cameraId: id
			},
			function(data){
				alert(data.message);
			},
			"json");
	}	
});


</script>

</body>
</html>